import React, {useEffect, useRef, useState} from "react";
import "./index.scss"; // 引入样式文件

// @ts-ignore
import {ESObjectsManager, type ESSceneObject} from "earthsdk3";
import {ESUeViewer} from "earthsdk3-ue";
import {ESCesiumViewer} from "earthsdk3-cesium";

// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESUeViewer, ESCesiumViewer);
const BaseEvents: React.FC = () => {
    const imageryLayerRef = useRef<ESSceneObject | undefined>(undefined);
    const containerRef = useRef<HTMLDivElement>(null);
    const [clickOncePosition, setClickOncePosition] = useState<any[]>([]);
    const [clickDoublePosition, setClickDoublePosition] = useState<any[]>([]);
    const [hoverPosition, setHoverPosition] = useState<any[]>([]);
    const [pointerOverPosition, setPointerOverPosition] = useState<any[]>([]);
    const [pointerOutPosition, setPointerOutPosition] = useState<any[]>([]);
    const [pointerMovePosition, setPointerMovePosition] = useState<any[]>([]);
    const [pointerDownPosition, setPointerDownPosition] = useState<any[]>([]);
    const [pointerUpPosition, setPointerUpPosition] = useState<any[]>([]);
    const [wheelPosition, setWheelPosition] = useState<any[]>([]);
    const [keyDownPosition, setKeyDownPosition] = useState<any>(undefined);
    const [keyUpPosition, setKeyUpPosition] = useState<any>(undefined);
    useEffect(() => {
        if (!containerRef.current) return;

        // 创建 Cesium 视口
        const viewer = objm.createCesiumViewer(containerRef.current);
        console.log("viewer", viewer);
        // 通过json创建一个影像图层,加载全球影像切片
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            show: true,
            type: "ESImageryLayer",
            maximumLevel: 18,
            name: "全球影像",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });
        imageryLayerRef.current = imageryLayer;

        /** ---------------------------------事件的监听don---------------------------------**/
        /*
                问题1：如何感知到【属性的变化】？
                答案1：监听【属性+Changed】命名的的事件
                问题2：如何监听【事件】？
                答案2：通过【don】来监听
                问题3：为什么叫don，监听不应该叫on吗？
                答案3：一般事件，都要有监听和取消监听,但是有时候对象是被动销毁，这个时候容易忽略取消监听
                      don是【disposableOn】的简写，两者都可以用，字面意思是【释放时取消监听】即可监听，又能销毁时取消监听
            */
        //监听地图显隐状态
        imageryLayer!.showChanged.don((newValue: any, oldValue: any) => {
            console.log(newValue, oldValue);
            alert(`监听到show属性的变化：影像即将${newValue ? "显示了" : "隐藏了"}`);
        });
        // 监听视口创建完成事件
        objm.viewerCreatedEvent.don((viewer) => {
            //单击事件
            viewer.clickEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("单击坐标-screenPosition", screenPosition);
                console.log("单击事件-pointerEvent", pointerEvent);
                setClickOncePosition(JSON.stringify(screenPosition) as any);
            });
            //双击事件
            viewer.dblclickEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("双击事件-screenPosition", screenPosition);
                console.log("双击事件-pointerEvent", pointerEvent);
                setClickDoublePosition(JSON.stringify(screenPosition) as any);
            });
            //鼠标悬停事件 悬停时长可由viewer.hoverTime属性控制
            viewer.hoverEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标悬浮事件-screenPosition", screenPosition);
                console.log("鼠标悬浮事件-pointerEvent", pointerEvent);
                setHoverPosition(JSON.stringify(screenPosition) as any);
            });
            //pointerOverEvent 鼠标移入
            viewer.pointerOverEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标移入-screenPosition", screenPosition);
                console.log("鼠标移入-pointerEvent", pointerEvent);
                setPointerOverPosition(JSON.stringify(screenPosition) as any);
            });
            //pointerOutEvent 鼠标移出
            viewer.pointerOutEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标移出-screenPosition", screenPosition);
                console.log("鼠标移出-pointerEvent", pointerEvent);
                setPointerOutPosition(JSON.stringify(screenPosition) as any);
            });
            //pointerMoveEvent 鼠标移动
            viewer.pointerMoveEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标移动-screenPosition", screenPosition);
                console.log("鼠标移动-pointerEvent", pointerEvent);
                setPointerMovePosition(JSON.stringify(screenPosition) as any);
            });
            //pointerDownEvent 鼠标按下
            viewer.pointerDownEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标按下-screenPosition", screenPosition);
                console.log("鼠标按下-pointerEvent", pointerEvent);
                setPointerDownPosition(JSON.stringify(screenPosition) as any);
            });
            //pointerUpEvent 鼠标抬起
            viewer.pointerUpEvent.don((e) => {
                const {screenPosition, pointerEvent} = e;
                console.log("鼠标抬起-screenPosition", screenPosition);
                console.log("鼠标抬起-pointerEvent", pointerEvent);
                setPointerUpPosition(JSON.stringify(screenPosition) as any);
            });
            //wheelEvent 鼠标滚轮滚动
            viewer.wheelEvent.don((e) => {
                const {deltaX, deltaY} = e;
                console.log(e);
                setWheelPosition([deltaX, deltaY]);
            });
            //键盘按下
            viewer.keyDownEvent.don((e) => {
                console.log(e);
                setKeyDownPosition(e.key);
            });
            //键盘抬起
            viewer.keyUpEvent.don((e) => {
                console.log(e);
                setKeyUpPosition(e.key);
            });
        });
    }, []);
    const handleShowImageLayer = () => {
        imageryLayerRef.current!.show = !imageryLayerRef.current!.show;
    };
    return (
        <div className="box">
            <div className="container" ref={containerRef}></div>
            <div className="btn-area">
                <button onClick={() => handleShowImageLayer()}>显示隐藏影像切片</button>
                <div>单击-当前点击坐标为{clickOncePosition}</div>
                <div>双击-当前点击坐标为{clickDoublePosition}</div>
                <div>悬浮事件-当前点击坐标为 {hoverPosition}</div>
                <div>鼠标移入-当前点击坐标为 {pointerOverPosition}</div>
                <div>鼠标移出-当前点击坐标为 {pointerOutPosition}</div>
                <div>鼠标移动-当前点击坐标为 {pointerMovePosition}</div>
                <div>鼠标按下-当前点击坐标为 {pointerDownPosition}</div>
                <div>鼠标抬起-当前点击坐标为 {pointerUpPosition}</div>
                <div>鼠标滚轮滚动-当前点击坐标为 {wheelPosition}</div>
                <div>键盘按下-键为 {keyDownPosition}</div>
                <div>键盘抬起-键为 {keyUpPosition}</div>
            </div>
        </div>
    );
};

export default BaseEvents;
